<template>
  <div class="wipper">
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <!-- data-swiper-autoplay 自动轮播延迟时间 -->
    <swiper-slide v-for="item in swipersList" :key="item.id" data-swiper-autoplay="2000">
      <img class="swiper-img" :src="item.imgUrl">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>


<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name:"homeSwiper",
  props:{
    swipersList:Array
  },
  components: {
    swiper,
    swiperSlide
  },
  data(){
    return {
      // 参数配置，具体可上官网查看  loop左右轮播，autoplay自动轮播
      swiperOption:{
        pagination:".swiper-pagination",
        loop:true,
        autoplay:true,
        //等同于以下设置
        // autoplay: {
        //   delay: 6000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true,
        // },
      }
    }
  },
  // computed: {
  //     swiper() {
  //       return this.$refs.mySwiper.swiper
  //     }
  //   },
  //   mounted() {
  //     // current swiper instance
  //     // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
  //     console.log('this is current swiper instance object', this.swiper)
  //     this.swiper.slideTo(3, 1000, false)
  //   }
}
</script>

<style lang="stylus" scoped>
// 穿透，scoped表明该css只在该作用域下才有效，而swiper-pagination-bullet-active存在于swiper组件中，
// 故无法直接对该css做操作，
// 使用>>> 可以穿透并操作该css类
.wipper >>> .swiper-pagination-bullet-active {
  background-color: #fff;
}

// 以下四个参数作用为 宽度100%，高度为宽度的37.5%,
.wipper {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 26.7%;

  .swiper-img {
    // 使图片全部显示
    width: 100%;
  }
}
</style>
